<template>
  <div>
    <el-row>
      <el-col :span="18" class="mt20">
        <TheQueryForm :option="searchOption" @onSubmit="onSubmit" @onClear="onClear"></TheQueryForm>
      </el-col>
      <el-col :span="6" class="mt20" style="display: flex; justify-content: flex-end">
        <el-button size="small" :loading="exportLoading" @click="handleExport">导出Excel</el-button>
      </el-col>
    </el-row>

    <TheTable
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
    />
  </div>
</template>

<script>
import {
  apiOrderSettlementListByMerchant,
  apiOrderSettlementExportByMerchant
} from "@/api/statements.js";
import { Link } from "element-ui";
export default {
  data() {
    return {
      searchOption: [
        {
          field: "orderId",
          label: "订单ID",
          placeholder: "订单ID",
          required: false,
          rules: [],
          type: "Input",
          defaultValue: ""
        },

        {
          type: "DatePickerRange",
          field: "time",
          label: "结算完成时间",
          placeholder: "结算完成时间",
          required: false,
          rules: []
        }
      ],
      queryParams: {},
      pageNo: 1,
      limit: 10,
      queryPageApi: apiOrderSettlementListByMerchant,
      tableOption: [
        {
          label: "结算id",
          prop: "settlementFlowId"
        },
        {
          label: "关联订单id",
          prop: "orderId",
          render(h, { row }) {
            return (
              <el-link
                type="primary"
                href={"/order/platformDetail?serviceOrderId=" + row.orderId}
              >
                {row.orderId}
              </el-link>
            );
          }
        },
        {
          label: "服务项目",
          prop: "serviceItems",
          formatter({ serviceItems }) {
            return this.$filters.filterServiceCategoryTypeEnum(serviceItems);
          }
        },
        {
          label: "结算类型",
          prop: "settleType",
          formatter({ settleType }) {
            return this.$filters.filterSettleType(settleType);
          }
        },
        {
          label: "结算金额",
          prop: "settlementAmount",
          formatter({ settlementAmount }) {
            return this.$filters.filterPriceFormat(settlementAmount);
          }
        },
        {
          label: "原因",
          prop: "reason",
          formatter({ reason }) {
            return this.$filters.filterRunWaterChangeType(reason);
          }
        },
        {
          label: "结算完成时间",
          prop: "finishedSettleTime",
          render(createElement, { row }) {
            try {
              const strArr = row.finishedSettleTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        }
      ],
      exportLoading: false
    };
  },
  mounted() {},
  methods: {
    onSubmit({ values }) {
      if (values.hasOwnProperty("time")) {
        values = {
          ...values,
          finishedStartTime: values.time ? values.time[0] : "",
          finishedEndTime: values.time ? values.time[1] : ""
        };
        delete values.time;
      }
      this.queryParams = values;
    },
    onClear() {
      this.queryParams = {
        takeOrders: ""
      };
    },
    // 导出
    async handleExport() {
      this.exportLoading = true;
      const res = await apiOrderSettlementExportByMerchant({
        ...this.queryParams
      });
      if (res.code === "SUCCESS") {
        let header = [
          {
            title: "结算id",
            prop: "id",
            valueType: "s"
          },
          {
            title: "关联订单id",
            prop: "orderId"
          },
          {
            title: "服务项目",
            prop: "serviceItems",
            valueType: "s"
          },
          {
            title: "结算类型",
            prop: "settleType",
            valueType: "s"
          },
          {
            title: "结算金额",
            prop: "settlementAmount",
            valueType: "s"
          },
          {
            title: "原因",
            prop: "reason",
            valueType: "s"
          },
          {
            title: "结算完成时间",
            prop: "finishedSettleTime",
            valueType: "s"
          }
        ];

        let dataSource = res.data.map(item => {
          return {
            ...item,
            settleType: this.$filters.filterSettleType(item.settleType),
            settlementAmount: item.settlementAmount / 100,
            reason: this.$filters.filterRunWaterChangeType(item.reason),
            serviceItems: this.$filters.filterServiceCategoryTypeEnum(
              item.serviceItems
            )
          };
        });
        const option = {
          dataSource: dataSource,
          header: header,
          fileName: "结算记录"
        };

        window.$Json2Excel(option);
        this.exportLoading = false;
      } else {
        this.$message({
          message: "导出操作失败,请重试",
          type: "warring"
        });
        this.exportLoading = false;
      }
    }
  }
};
</script>
